<!-- 柱状图 -->
<template>
  <div class="chart-container">
    <div ref="barchart" class="barchart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "",
      legendColor: ""
    };
  },
  props: {
    title: {
      type: String,
      default: "按日统计趋势"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%" // 默认高度改为100%以自适应父容器
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  created() { },
  mounted() {
    this.color = localStorage.getItem("isNightMode") || "night";
    if (this.color === "day") {
      this.legendColor = "#000";
    } else {
      this.legendColor = "#fff";
    }
    this.myChart = this.$echarts.init(this.$refs.barchart, "macarons");
    this.setOptions(this.chartData);
    // 监听窗口大小变化以重新渲染图表
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化监听器
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    setOptions(chartData) {
      this.myChart.setOption({
        xAxis: {
          type: "category",
          data: chartData.xAxis
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#666", // 修改网格线颜色为浅灰色
              type: "dashed", // 添加虚线效果
              width: 1 // 线条宽度
            }
          }
        },
        legend: {
          data: ["待执行", "执行中", "成功", "失败", "任务删除", "失败，准备重试",],
          bottom: 10,
          textStyle: {
            color: this.legendColor
          }
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          textStyle: {
            color: "#000"
          }
        },
        series: [
          {
            name: "待执行",
            data: chartData.pendingExecution,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#909399"
            }
          },
          {
            name: "执行中",
            data: chartData.inProgress,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#409EFF"
            }
          },
          {
            name: "成功",
            data: chartData.successSum,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#67C23A"
            }
          },
          {
            name: "失败",
            data: chartData.failSum,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#F56C6C"
            }
          },
          {
            name: "任务删除",
            data: chartData.taskDeletion,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#606266"
            }
          },
          {
            name: "失败，准备重试",
            data: chartData.retry,
            type: "bar",
            stack: "stack",
            barWidth: 50,
            itemStyle: {
              color: "#E6A23C"
            }
          },
        ]
      });
      this.myChart.off("click");
      this.myChart.on("click", (params) => {
        this.$emit("barClick", params.name, this.title);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-container {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  height: 100%;
  /* 继承父组件高度 */
  width: 100%;
  /* 确保宽度填满父容器 */
}

.barchart {
  flex: 1;
  /* 占据全部可用高度 */
  width: 100%;
  /* 宽度填满容器 */
  min-height: 350px;
  /* 最小高度以确保图表可见 */
}
</style>
